<template>
	<view class="container">
		<customNavigation title="任务列表" src="../static/images/nav_icon_back.png" src2="../static/images/nav_icon_logo.png" color="white" background="#32A238"></customNavigation>
		<view class="main">
			<view class="taskItem" v-for="(item,index) in list" @click="toCheckUp(item.ID)">
				<view class="leftNum">
					{{index+1}}
				</view>
				<view class="centerBox">
					<view class="centerBoxTop">
						{{item.taskName}}
					</view>
					<view class="centerBoxBottom">
						<view class="completeText">
							要求完成时间
						</view>
						<view class="completeTime">
							{{item.requestDt}}
						</view>
					</view>
				</view>
				<view :class="['rightState',{'success':item.State=='已完成'},{'fail':item.State=='未完成'}]">
					{{item.State}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation.vue"
	import * as api from '../../utils/controller.js'
	export default {
		components:{
			customNavigation
		},
		data() {
			return {
				list:[]
			};
		},
		onLoad() {
			this.getTaskList()
		},
		methods:{
			//获取任务列表
			getTaskList(){
				api.GetTaskList().then(res=>{
					let list=[]
					res.data.forEach(item=>{
						if(item.State=="未完成"){
							item.requestDt=item.requestDt.split(" ")[0]
							list.push(item)
						}
					})
					this.list=list
				})
			},
			toCheckUp(id){
				uni.navigateTo({
					url:"/pages/checkUp/checkUp?ID="+id
				})
			}
		}
	}
</script>

<style lang="less">
page{
	width: 100%;
	height: auto;
	background-color: #FAFAFA;
	.container{
		width: 100%;
		height: auto;
		.main{
			padding: 24rpx 30rpx 24rpx 30rpx;
			box-sizing: border-box;
			margin-top: 11vh;
			.taskItem{
				width: 686rpx;
				height: 188rpx;
				overflow: hidden;
				border-radius: 22px;
				display: flex;
				align-items: center;
				background-color: white;
				margin-bottom: 22rpx;
				.leftNum{
					width: 94rpx;
					height: 188rpx;
					border-right: 2rpx solid #F5F5F5;
					box-sizing: border-box;
					text-align: center;
					line-height: 188rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2A2A2A;
				}
				.centerBox{
					width: 470rpx;
					height: 188rpx;
					.centerBoxTop{
						width: 100%;
						height: 97rpx;
						box-sizing: border-box;
						border-bottom: 2rpx solid #F5F5F5;
						padding-left: 30rpx;
						padding-right: 30rpx;
						box-sizing: border-box;
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2A2A2A;
						line-height: 97rpx;
					}
					.centerBoxBottom{
						width: 100%;
						height: 89rpx;
						display: flex;
						align-items: center;
						.completeText{
							width: 216rpx;
							border-right: 2rpx solid #F5F5F5;
							height: 100%;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
							text-align: center;
							line-height: 89rpx;
							box-sizing: border-box;
						}
						.completeTime{
							width: 252rpx;
							border-right: 2rpx solid #F5F5F5;
							height: 100%;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
							text-align: center;
							line-height: 89rpx;
						}
					}
				}
				.rightState{
					width: 120rpx;
					height: 188rpx;
					background: #32A238;
					border-radius: 0rpx 22rpx 22rpx 0rpx;
					text-align: center;
					line-height: 188rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FEFEFE;
				}
				.success{
					background: #32A238;
				}
				.fail{
					background: #EB1D1D;
				}
			}
		}
	}
}
</style>
